<template>
  <div class="film-poster">
    <div class="lazy-img-wrap"><img :src="imgUrl" alt="海报"></div>
  </div>
</template>

<script>
export default {
  name: 'Poster',
  props: {
    imgUrl: String
  },
  data() {
    return {}
  }
}
</script>

<style lang="scss" scoped>

.film-poster {
  height: 56vw;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;

  .lazy-img-wrap {
    position: absolute;
    width: 100%;
  }

  img {
    width: 100%;
  }
}
</style>
